<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>登录 - 可穿戴心电监测平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      background: linear-gradient(to bottom right, #e0f2ff, #f0f8ff);
      font-family: "Microsoft YaHei", sans-serif;
    }
  </style>
</head>
<body class="flex items-center justify-center min-h-screen">

  <div class="bg-white p-8 rounded-2xl shadow-xl w-96 border border-gray-200">
    <h1 class="text-2xl font-semibold text-center mb-6 text-blue-600">可穿戴心电监测平台</h1>
    <h2 class="text-center text-gray-500 mb-6">用户登录</h2>

    {% if msg %}
      <p class="text-center mb-4 text-sm font-medium"
         style="color: {% if '成功' in msg %}green{% else %}red{% endif %};">
        {{ msg }}
      </p>
    {% endif %}

    <form method="post" action="/login" autocomplete="off" class="space-y-5">

      <!-- 用户名 -->
      <div>
        <label for="username" class="block text-gray-700 mb-1">用户名</label>
        <input type="text"
               id="username"
               name="username"
               value="{{ username or '' }}"
               placeholder="请输入用户名"
               autocomplete="new-username"
               autocorrect="off"
               autocapitalize="off"
               spellcheck="false"
               class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-blue-400 outline-none"
               required>
      </div>

      <!-- 密码 -->
      <div>
        <label for="password" class="block text-gray-700 mb-1">密码</label>
        <input type="password"
               id="password"
               name="password"
               value="{{ password or '' }}"
               placeholder="请输入密码"
               autocomplete="new-password"
               autocorrect="off"
               autocapitalize="off"
               spellcheck="false"
               class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-blue-400 outline-none"
               required>
      </div>

      <!-- 验证码 -->
      <div>
        <label for="captcha" class="block text-gray-700 mb-1">验证码</label>
        <div class="flex gap-2 items-center">
          <input type="text"
                 id="captcha"
                 name="captcha"
                 placeholder="请输入验证码"
                 autocomplete="off"
                 autocorrect="off"
                 autocapitalize="off"
                 spellcheck="false"
                 class="border rounded px-3 py-2 flex-1 focus:ring-2 focus:ring-blue-400 outline-none"
                 required>
          <img src="/captcha"
               id="captcha-img"
               alt="验证码"
               class="w-24 h-10 border rounded cursor-pointer select-none"
               title="点击刷新验证码"
               onclick="this.src='/captcha?' + Math.random();">
        </div>
      </div>

      <!-- 登录按钮 -->
      <button type="submit"
              class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
        登录
      </button>

      <p class="text-center text-sm text-gray-600 mt-3">
        还没有账号？
        <a href="/register" class="text-blue-500 hover:underline">注册一个</a>
      </p>
    </form>
  </div>

  <script>
    // ✅ 防止浏览器自动填充缓存的验证码
    window.onload = () => {
      const captchaInput = document.getElementById("captcha");
      if (captchaInput) captchaInput.value = "";
    };
  </script>

</body>
</html>
